<% logo = section.logo || current_store.logo %>
<div style='<%= section_styles(section) %>'>
  <div class="page-container">
    <div class="bg-background text-text flex flex-col items-center gap-2 md:flex-row justify-between">
      <% if logo&.attached? && logo.variable? %>
        <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
      <% else %>
        <h1 class="text-2xl"><%= current_store.name %></h1>
      <% end %>

      <div
        data-controller="modal"
        data-modal-allow-background-close="true"
        data-modal-backdrop-color-value="rgba(0,0,0,0.32)"
        class="h-full">
        <%= button_tag class: "underline flex gap-2 items-center", data: { action: "click->modal#open" } do %>
          <span>
            <%= render 'spree/shared/icons/lock', class: "w-5 h-5" %>
          </span>
          <%= Spree.t(:enter_using_password) %>
        <% end %>

        <div
          data-modal-target="container"
          data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
          class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]">
          <div class="w-full lg:w-[800px] relative h-[100dvh] lg:h-auto lg:max-h-screen flex items-center">
            <div class="lg:mx-0 w-full bg-background">
              <div class="px-8 py-6">
                <div class="flex justify-between uppercase mb-4">
                  <%= Spree.t(:enter_using_password) %>
                  <%= button_tag data: { action: "click->modal#close" } do %>
                    <%= render 'spree/shared/icons/close' %>
                    <span class="sr-only"><%= Spree.t(:close) %></span>
                  <% end %>
                </div>
                <div class="text-sm p-1">
                  <%= form_with url: spree.password_path, method: :post, class: "flex gap-2" do |f| %>
                    <%= f.password_field :password,
                      class: 'text-input w-full px-4 py-3',
                      placeholder: Spree.t(:password),
                      required: true,
                      autofocus: true %>
                    <%= f.button Spree.t(:enter), type: :submit, class: "btn w-40 btn-primary" %>
                  <% end %>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
